<template>
    <div class="dialog">
        <el-dialog
            title="查看专家资料"
            :visible.sync="ifShowDialog"
        >
            <el-form
                :model="form"
                label-width="100px"
            >
                <el-form-item
                    label="真实姓名"
                >
                    <el-input v-model="form.realName"></el-input>
                </el-form-item>

                <el-form-item
                    label="真实照片"
                >
                    <Upload :imgSrc="form.realPhoto" :model="form" imgName="realPhoto"></Upload>
                </el-form-item>


                <el-form-item
                    label="专家简介"
                >
                    <el-input v-model="form.expertIntroduce"></el-input>
                </el-form-item>

                <el-form-item
                    label="座右铭"
                >
                    <el-input v-model="form.expertMotto"></el-input>
                </el-form-item>

                <el-form-item
                    label="粉丝数目"
                >
                    <el-input-number v-model="form.fansNum" :min="0" style="float:left" ></el-input-number>
                </el-form-item>

                <el-form-item
                    label="解决问题数目"
                >
                    <el-input-number v-model="form.solveQuestionNum" :min="0"  style="float:left" ></el-input-number>
                </el-form-item>

                <el-form-item
                    label="回答问题数目"
                >
                    <el-input-number v-model="form.answerQuestionNum" :min="0" style="float:left"  ></el-input-number>
                </el-form-item>

                <el-form-item
                    v-for="(item, index) in expertInfo"
                    :key="index"
                    :label="item.label"
                >
                    <el-input v-model="item.value" v-if="item.type === 'text'"></el-input>

                    <el-select v-model="item.value" v-if="item.type === 'enum'" style="float:left">
                        <el-option
                            v-for="(option, index) in item.chooseValue"
                            :key="index"
                            :label="option"
                            :value="option"
                        ></el-option>
                    </el-select>

                    <Upload 
                    :imgSrc="item.value" 
                    v-if="item.type === 'image'"
                    :model="item"
                    imgName="value"
                    ></Upload>

                </el-form-item>
                
                <el-form-item style="margin-top: 20px">
                    <el-button type="primary" @click="change">修改</el-button>
                    <el-button type="info" @click="cancel">取消</el-button>
                </el-form-item>


            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import Upload from 'template/Upload'
export default {
    name: 'Dialog',
    components: {
        Upload
    },
    data () {
        return {
            ifShowDialog: false,
            expertInfo: [{
                label: '性别',
                type: 'enum',
                value: '男',
                chooseValue: ['男', '女']
            }, {
                label: '身份证正面照',
                type: 'image',
                value: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1764520101,2631908780&fm=85&app=52&f=JPEG?w=121&h=75&s=C813CF14414A64EA4A545DC20300E0B2'
            }],
            form: {
               realPhoto: ''
            }
        }
    },
    methods: {
        show () {
            this.ifShowDialog = true;
        },
        change () {
            this.ifShowDialog = false;
        },
        cancel () {
            this.ifShowDialog = false;
        }
    }
}
</script>

<style lang="stylus" scoped>
    .dialog
        width 100%
</style>


